<template>
	<view class="uni_box home">
		<image class="bghome" :src="ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png')" />
		<navbar title='结算工资' :backgroundColor='backgroundColor'>
		</navbar>
		<view class="content">
			
			<view class="zhaoone">

				<view class="ywxian" v-if="info.insuranceist_status>=1">
					<image class="img_bjbao" src="@/pages_client/static/img/img_bjbao.png" />
					<view class="baoview">
						<image class="icON_bz" src="@/pages_client/static/img/icON_bz.png" />
						<text class="jianame">用工意外保障已生效</text>
						<text class="jianame lv">24小时内有效</text>
						<text class="jianame lv ml">由众安保险承保</text>
						<image class="icon_lvnext" src="@/pages_client/static/img/icon_lvnext.png" />
					</view>
				</view>

				<view class="ohead">
					<view class="yijie">已接单</view>
					<image class="icon_jf" :src="info.avatar" />
					<view class="yinav">
						<text class="name">{{info.nickname}}</text>
						<view class="jienav">
							<view class="bq" v-if="info.gender">{{ info.gender }}</view>
							<view class="bq" v-if="info.age">{{info.age}}岁</view>
							<view class="bq sxiao" v-if="info.insuranceist_status>=1">
								<image class="icon_bz_s" src="@/pages_admin/static/icon_bz_s.png" />
								<text class="bname">{{info.insuranceist_status_text}}</text>
								<image class="icon_ck_s" src="@/pages_admin/static/icon_ck_s.png" />
							</view>
							<!-- <view class="xq">
								<text>详情</text>
								<image class="icon_gd" src="@/pages_admin/static/icon_gd.png" />
							</view> -->
						</view>
					</view>
				</view>
				<view class="nzlist">
					<text class="nzname">上班明细</text>
					<view class="nblist">
						<text class="bname wid">工作时间</text>
						<text class="rname">{{info.startday+' '+info.starthour}} 至 {{info.endday+' '+info.endhour}}</text>
					</view>
					<view class="ztwonew">
						<!-- <text class="shiname">03月10日</text> -->
						<view class="shinav">
							<view class="shileft">
								<text class="kname">开工时间</text>
								<text class="ktime">{{ info.starthour }}</text>
								<text class="kname">{{info.startday}}</text>
							</view>
							<view class="shilian">
								<view class="lianone">
									<image class="bg" src="@/pages_admin/static/shilianicon.png" />
									<view class="ltxt">
										{{info.timed==2?'工作时长':'工作时长'}}
									</view>
								</view>
								<text class="gong">{{info.workhour}}</text>
							</view>
							<view class="shileft">
								<text class="kname">工作结束时间</text>
								<text class="ktime">{{info.endhour}}</text>
								<text class="kname">{{ info.endday }}</text>
							</view>
						</view>
					</view>
					<view class="nblist mb-2"  v-if="info.settlement==1">
						<text class="bname">计薪工时</text>
						<view class="rval ml">
							<text class="rname">{{info.workhour}}</text>
						</view>
					</view>
					<view class="nblist mb-2">
						<text class="bname">工价</text>
						<view class="rval ml">
							<text class="rname">{{info.price}}{{info.settlement==1?'/元/时':'元/件'}}</text>
						</view>
					</view>
					<view class="nblist mb-2" v-if="info.settlement==1">
						<text class="bname">应付工资</text>
						<view class="rval ml">
							<text class="rname" style="color: red;">{{info.pay_money}}元</text>
						</view>
					</view>
					<view class="nblist mb-2" v-if="info.settlement==2">
						<text class="bname">保底工价</text>
						<view class="rval ml">
							<text class="rname" style="color: red;">{{info.minimum}}元/时</text>
						</view>
					</view>
				</view>
				<view class="nzlist">
					<text class="nzname">结算</text>
					<!-- <view class="dakajilu" @click="dakashow=true">
						<text class="heshi">员工异常打卡1次，请注意核实</text>
						<text class="heshi ml">查看打卡记录</text>
						<image class="icon_ckred" src="@/pages_admin/static/icon_ckred.png" />
					</view> -->
					<view class="sjiview" v-if="info.settlement==1">
						<text class="sjname">实际结算工时</text>
						<view class="jieview">
							<u-input class="iteminput" style="flex: 1;" v-model="hour" type="number" placeholder='请输入' />
							<text class="xshi">小时</text>
						</view>
					</view>
					<view class="sjiview" v-if="info.settlement==2">
						<text class="sjname">实际结算件数</text>
						<view class="jieview">
							<u-input class="iteminput" style="flex: 1;" v-model="hour" type="number" placeholder='请输入' />
							<text class="xshi">件</text>
						</view>
					</view>
					<view class="sjiview">
						<text class="sjname">实际结算工资</text>
						<view class="jieview">
							<u-input class="iteminput" style="flex: 1;" v-model="money" type="number" placeholder='请输入' />
							<text class="xshi">元</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="newbot">
			<view class="botview">
				<view class="lianxi" @click="getedit">
					<text class="lname">计算金额</text>
				</view>
			</view>
		</view>

		<!-- <view class="kaigongma">
			<text class="kainame">开工码</text>
			<text class="kainum">7197</text>
		</view> -->

		<!-- 支付弹窗 -->
		<PayNumPop :paynumshow="paynumshow" :payinfo="payinfo" :popid="popid" :money="money" :hour="hour" @closepaynum="paynumshow=false" @paysucess="paysucess"></PayNumPop>
		<!-- 打卡记录 -->
		<DKRecord :dakashow="dakashow" :dakalist="dakalist" @closedka="dakashow=false"></DKRecord>
	</view>
</template>

<script>
import PayNumPop from '@/pages_admin/components/PayNumPop/PayNumPop'
import DKRecord from '@/pages_admin/components/DKRecord/DKRecord'
	export default {
		components: {
			PayNumPop,
			DKRecord
		},
		data() {
			return {
				swlist: [{
						image: '/static/banner.png',
					},
					{
						image: '/static/banner.png',
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					}
				],
				tablist: [{
					name: '已接单'
				}, {
					name: '待结算'
				}, {
					name: '已结算'
				}, {
					name: '已取消'
				}],
				current: 0,
				backgroundColor:'none',
				phoneshow:false,
				ordershow:false,
				timestamp:86400,
				shareshow:false,//分享
				dakashow:false,//打卡记录
				num:2,
				paynumshow:false,
				id:'',
				info:{},
				dakalist:[],
				popid:'',
				money:'',
				hour:0,
				payinfo:{}
			}
		},
		onLoad(option) {
			if(option.id){
				this.id = option.id
			}
			if(option.popid){
				this.popid = option.popid
			}
			this.getorderdetail()
			this.getjilu()
		},
		onShow() {
		},
		methods: {
			async getorderdetail(){
				
				let res = await this.$u.api.getTaskOrderPayParams({
					id:this.popid
				});
				this.info = res
				this.hour = this.info.pay_hour
				this.money = this.info.pay_money
				if(this.info.settlement == 2){
					this.hour = ''
				}

			},
			async getjilu(){
				let res = await this.$u.api.getClockList({
					id:this.popid
				});
				this.dakalist = res.list

			},
			change(index) {
				this.current = index;
			},
			confrimOrderSucess(){
				this.navrouter("/pages_admin/twoPage/OrderSucess?id="+this.popid);
			},
			orderoperate(e){
				if(e == 4){
					//飞单
					this.navrouter("/pages_client/twoPage/FlyReport");
				}else if(e == 6){
					//分享
					this.shareshow = true
				}else if(e == 5){
					//打卡记录
					this.dakashow = true
				}else if(e == 2){
					//遇到问题
					this.navrouter("/pages_admin/twoPage/Problem");
				}else if(e == 1){
					//费用明细
					this.navrouter("/pages_admin/twoPage/FMingxi");
				}
			},
			getorder(){
				this.navrouter("/pages_client/twoPage/Problem");
			},
			async getedit(){
				if(!this.money){
					this.$u.toast("请输入实际结算工资");
					return;
				}
				if(!this.hour&&this.info.settlement==2){
					this.$u.toast("请输入件数");
					return;
				}
				if(!this.hour&&this.info.settlement==1){
					this.$u.toast("请输入时长");
					return;
				}
				// this.paynumshow = true
				let res = await this.$u.api.getPayTaskFee({
                	id:this.popid,
                    pay_type:'wechat',
                    money:this.money,
                    hour:this.hour
                });
				this.payinfo = res
				this.paynumshow = true
			},
			paysucess(){
				this.paynumshow = false
				this.confrimOrderSucess()
			}
		},
		onPageScroll(e) {
			// console.log('页面滚动距离:', e.scrollTop);
			// 在这里编写滚动相关的逻辑
			if(e.scrollTop>=100){
				this.backgroundColor = '#ffffff'
			}else{
				this.backgroundColor = 'none'
			}
			this.$forceUpdate()
		},
		
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F5F5F5;
	}
	.bghome{
		width: 100%;
		position: absolute;
		top: 0;
		height: 550rpx;
		
	}
	.zhaoone{
		// background-color: #fff;
		padding: 20rpx 0;
	}
	.content{
		// background-color: #fff;
		padding-bottom: 200rpx;
		position: relative;
		// padding-top: 20rpx;
		.gzuo{
			margin: 50rpx;
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			.gzleft{
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.icon_sj{
				width: 50rpx;
				height: 50rpx;
				margin-right: 8rpx;
			}
			.zname{
				font-weight: 500;
				font-size: 40rpx;
				color: #111111;
			}
			.icon_nexthui{
				width: 24rpx;
				height: 24rpx;
				margin-left: 10rpx;
			}
			.gzright{
				margin-left: auto;
				display: flex;
				flex-direction: column;
				.yigzuo{
					font-weight: 500;
					font-size: 26rpx;
					color: #666666;
					display: block;
					margin-bottom: 10rpx;
				}
			}
		}
		.lc{
			margin: 20rpx 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.bq{
				width: 28rpx;
				height: 28rpx;
				background: linear-gradient(90deg, #FF8F39, #FF4D43);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 800;
				font-size: 22rpx;
				color: #FFEFE9;
				margin-right: 5rpx;
			}
			.bqname{
				font-weight: 500;
				font-size: 24rpx;
				color: #EA5918;
				display: inline-block;
				margin-right: 5rpx;
				white-space: nowrap;
			}
			.icon-xyb{
				width: 42rpx;
				height: 31rpx;
				margin-right: 9rpx;
			}
		}
		.tieone{
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			margin: 24rpx 30rpx 0;
			.tname{
				font-weight: 800;
				font-size: 40rpx;
				color: #111111;
			}
			.bqitem{
				margin: 20rpx 0;
			}
			.sc{
				display: flex;
				padding: 4rpx 20rpx;
				flex-direction: row;
				align-items: center;
				border-radius: 6rpx;
				font-weight: 500;
				font-size: 24rpx;
				margin-right: 15rpx;
				background-color: rgba(245, 245, 245, 1);
				color: #999999;
				.icon_bz{
					width: 24rpx;
					height: 24rpx;
					margin-right: 5rpx;
				}
			}
			.bqitem{
				display: flex;
				flex-direction: row;
			}
			.lv{
				background-color: rgba(233, 255, 235, 1);
				color: #16B925;
			}
			.chengse{
				background-color: rgba(255, 238, 231, 1);
				color: #F07F4C;
			}
			.bm{
				display: flex;
				flex-direction: row;
				margin-top: 10rpx;
				.bmleft{
					font-weight: 800;
					font-size: 44rpx;
					color: #EA5918;
				}
				.danwei{
					font-weight: bold;
					font-size: 24rpx;
					color: #EA5918;
				}
			}
			
		}
		
		.ywxian{
			display: flex;
			// padding: 6rpx 15rpx;
			// background: #E9FFEB;
			// border-radius: 6rpx;
			align-items: center;
			// margin-top: 20rpx;
			position: relative;
			height: 80rpx;
			// padding: 0 15rpx;
			margin: 0 30rpx 24rpx;
			.img_bjbao{
				position: absolute;
				width: 100%;
				height: 100%;
			}
			.baoview{
				position: relative;
				display: flex;
				align-items: center;
				padding: 0 15rpx;
				width: 100%;
			}
			.icON_bz{
				margin-right: 6rpx;
				width: 24rpx;
				height: 24rpx;
			}
			.jianame{
				font-weight: 500;
				font-size: 24rpx;
				color: rgba(17, 17, 17, 1);
			}
			.lv{
				color: rgba(22, 185, 37, 1);
			}
			.icon_lvnext{
				width: 20rpx;
				height: 20rpx;
			}
			
		}
		.dtwo{
			padding: 30rpx;
		}
		.dname{
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.dfen{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin: 20rpx 0 0;
			.dfenitem{
				padding: 8rpx 20rpx;
				background: #EEEEEE;
				border-radius: 4rpx;
				margin-right: 20rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #51565D;
			}
			.gone{
				height: 26rpx;
				margin-right: 20rpx;
				width: 108rpx;
			}
			.dmiao{
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
		.dthree{
			display: flex;
			flex-direction: column;
			padding: 30rpx;
			.sname{
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				display: block;
				margin-bottom: 30rpx;
			}
			.slist{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				.sitem{
					width: 50%;
					margin-bottom: 20rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					.ziname{
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
						min-width: 90rpx;
					}
					.zval{
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						display: inline-block;
						margin-left: 8rpx;
					}
					.cha{
						font-weight: 500;
						color: #42ABDC;
					}
				}
			}
		}

		.dfour{
			padding: 20rpx 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.tou{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			.dfnav{
				width: 60%;
				display: flex;
				flex-direction: column;
				.dfname{
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #111111;
				}
				.dfmiao{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}
			.dfright{
				display: flex;
				margin-left: auto;
				flex-direction: row;
				align-items: center;
				text{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
				.icon_next{
					margin-left: 6rpx;
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
		.dfive{
			padding: 20rpx;
			.dcont{
				padding: 20rpx 0;
				border-top: 1rpx solid #eee;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
		
	}
	.titwo{
		display: flex;
		flex-direction: column;
		padding: 30rpx 20rpx;
		margin: 24rpx 30rpx 0;
		background: linear-gradient(90deg, #FF8F39, #FF4D43);
		border-radius: 30rpx;
		.chanhead{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 20rpx;
			.channame{
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
			}
			.rijie{
				padding: 4rpx 15rpx;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 6rpx;
				font-weight: bold;
				font-size: 24rpx;
				color: #FFFFFF;
				margin-left: 10rpx;
			}
			.times{
				margin-left: auto;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
		.newnav{
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 30rpx;
		}
		.anquan{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 30rpx;
			.icon_aq{
				margin-right: 8rpx;
				width: 30rpx;
				height: 30rpx;
			}
			.jubao{
				font-weight: bold;
				font-size: 24rpx;
				color: #999999;
			}
			.icon_nexthui{
				margin-left: 5rpx;
				width: 24rpx;
				height: 24rpx;
			}
		}
		.gname{
			font-weight: bold;
			font-size: 32rpx;
			color: #111111;
			display: block;
			margin-bottom: 30rpx;
		}
		.gnamenew{
			font-weight: bold;
			font-size: 32rpx;
			color: #111111;
			display: block;
		}
		.tishi{
			font-weight: 400;
			font-size: 22rpx;
			color: #666666;
		}
		.renlist{
			display: flex;
			flex-direction: row;
			margin-bottom: 20rpx;
			.rentit{
				display: inline-block;
				width: 130rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}
			.renval{
				font-weight: bold;
				font-size: 24rpx;
				color: #111111;
				max-width: 60%;
				white-space: normal;
			}
			.lv{
				font-weight: bold;
				font-size: 24rpx;
				color: #16B925;
			}
		}
		.icon_fz{
			width: 45rpx;
			height: 45rpx;
			margin-left: 20rpx;
		}
		.rval{
			display: flex;
			flex-direction: column;
			flex: 1;
			.sm{
				background: #FFEEE7;
				border-radius: 5rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 5rpx 20rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				margin-top: 9rpx;
			}
		}
		
		.renlist:last-child{
			margin-bottom: 0;
		}
		.flex-col{
			display: flex;
			flex-direction: column;
		}
		.ditishi{
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			display: block;
			text-align: center;
			margin-top: 20rpx;
		}
		.dizhi{
			position: relative;
			width: 100%;
			margin-top: 20rpx;
			height: 155rpx;
			.dizhiicon{
				position: absolute;
				width: 100%;
				height: 100%;
			}
			.diitem{
				position: relative;
				padding: 40rpx 30rpx 20rpx 40rpx;
				display: flex;
				flex-direction: row;
				.dileft{
					width: 80%;
					display: flex;
					flex-direction: column;

				}
				.diname{
					max-width: 100%;
					display: block;
					font-weight: bold;
					font-size: 30rpx;
					color: #111111;
				}
				.dimiao{
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
					display: block;
					margin-top: 10rpx;
				}
				.chadi{
					margin-left: auto;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.icon_dw{
						width: 28rpx;
						height: 28rpx;
						margin-bottom: 10rpx;
					}
					text{
						font-weight: 500;
						font-size: 20rpx;
						color: #999999;
					}
				}
			}

		}
		.bm{
			display: flex;
			flex-direction: row;
			margin-top: 20rpx;
			align-items: center;
			.zfabu{
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				display: inline-block;
				margin-right: 20rpx;
			}
			.img_tx{
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 10rpx;
			}
			.xm{
				font-weight: bold;
				font-size: 30rpx;
				color: #111111;
			}
			.xb{
				width: 30rpx;
				height: 30rpx;
				background: #DFFAFF;
				border-radius: 6rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				font-size: 20rpx;
				color: #3EABFF;
				margin-left: 10rpx;
			}

			.bmleft{
				font-weight: 800;
				font-size: 44rpx;
				color: #EA5918;
			}
			.danwei{
				font-weight: bold;
				font-size: 24rpx;
				color: #EA5918;
			}
		}
		.hpl{
			background: #F5F5F5;
			border-radius: 10rpx;
			display: flex;
			flex-direction: row;
			padding: 25rpx 0;
			margin: 20rpx 0;
			.plitem{
				flex: 1;
				display: flex;
				flex-direction: column;
				border-right: 1rpx solid rgba(204, 204, 204, 1);
				align-items: center;
				justify-content: center;
				.pnum{
					font-weight: bold;
					font-size: 32rpx;
					color: #111111;
				}
				.pname{
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}
			}
			.plitem:last-child{
				border-right: none;
			}
		}
	}
	.newbot{
		display: flex;
		flex-direction: column;
		// height: 200rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
	}
	.wenxin{
		height: 80rpx;
		background: #FFEEE5;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 30rpx;
		.wentit{
			border-radius: 6rpx;
			background-color: rgba(238, 127, 88, 0.2);
			display: flex;
			align-items: center;
			justify-content: center;
			width: 54rpx;
			height: 54rpx;
			font-weight: bold;
			font-size: 20rpx;
			color: #FF5142;
			text-align: center;
		}
		.tiwen{
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;
			text{
				font-weight: 500;
				font-size: 20rpx;
				color: #EA5918;
			}
		}
	}
	.yuedu{
		height: 80rpx;
		display: flex;
		padding: 0 30rpx;
		align-items: center;
		background-color: #fff;
		.icon_xz_n{
			width: 36rpx;
			height: 36rpx;
			margin-right: 8rpx;
		}
		.xy{
			font-weight: 500;
			font-size: 20rpx;
			color: #999999;
		}
		.xyhu{
			color: rgba(234, 89, 24, 1);
		}
	}
	.botview{
			height: 120rpx;
			background: #FFFFFF;
			width: 100%;
			
			display: flex;
			flex-direction: row;
			align-items: center;
			z-index: 1000;
			// border-top: 1rpx solid #eee;
			padding: 0 30rpx 20rpx 30rpx;
			
			.botleft{
				width: 20%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				.icon_fenxiang{
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 5rpx;
				}
				text{
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666;
				}
			}
			.lianxi{
				margin-left: auto;
				width: 100%;
				height: 90rpx;
				background: linear-gradient(90deg, #FF8F39, #FF4D43);
				border-radius: 45rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				.lname{
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
				}
				.lmiao{
					font-weight: 500;
					font-size: 20rpx;
					color: #FFFFFF;
				}
			}
			.yuwen{
				flex: 1;
				margin-right: 30rpx;
				height: 90rpx;
				background: #F5F5F5;
				border-radius: 45rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
			}
			.liantwo{
				display: flex;
				flex-direction: row;
				flex: 1;
				.qubtn{
					height: 90rpx;
					width: 200rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #F5F5F5;
					border-radius: 45rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}
				.queren{
					background: linear-gradient(90deg, #FF8F39, #FF4D43);
					color: #fff;
					margin-left: auto;
				}
			}
		}
	.zhanwei{
		height: 20rpx;
		width: 100%;
		background-color: #f6f6f6;
	}
	.botti{
		position: relative;
		// height: 387rpx;
		width: 100%;
		.bg{
			position: absolute;
			width: 100%;
			height: 100%;
		}
		.tione{
			position: relative;
			width: 100%;
			height: 100%;
			.tihead{
				display: flex;
				flex-direction: column;
				margin: 60rpx 40rpx;
				.qname{
					font-weight: bold;
					font-size: 36rpx;
					color: #000000;
				}
				.qnum{
					font-weight: 800;
					font-size: 36rpx;
					color: #EA5918;
					display: inline-block;
					margin: 0 8rpx;
				}
				.wushuang{
					font-weight: 500;
					font-size: 20rpx;
					color: #999999;
					display: block;
					margin-top: 8rpx;
				}
			}
			.tibot{
				height: 50%;
				width: 100%;
				position: relative;
				height: 200rpx;
				background: #FFFFFF;
				border-radius: 30rpx 30rpx 0rpx 0rpx;
				margin-top: auto;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 0 30rpx;
				// justify-content: center;
				.tiitem{
					// width: 120rpx;
					height: 120rpx;
					flex: 1;
					background: #FFFFFF;
					border-radius: 20rpx;
					border: 1px solid #CCCCCC;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					// margin-right: 50rpx;
					margin: 0 25rpx;
					max-width: 120rpx;
					.giicon{
						width: 56rpx;
						height: 56rpx;
						margin-bottom: 10rpx;
					}
					text{
						font-weight: 400;
						font-size: 20rpx;
						color: #666666;
					}
				}
				.tiitem:last-child{
					margin-right: 0;
				}
			}
		}
	}
	.olist{
		margin: 30rpx;
		.oitem{
			background: #FFFFFF;
			border-radius: 30rpx;
			display: flex;
			flex-direction: column;
			margin-bottom: 25rpx;
			

		}
		.ztbtn{
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			padding: 20rpx 0;
			border-top: 1rpx solid #eee;
			margin: 0 20rpx;
			.btns{
				padding: 14rpx 50rpx;
				background: #F5F5F5;
				border-radius: 34rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #666666;
				margin-left: 20rpx;
			}
		}
	}


	.ohead{
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		margin: 30rpx 30rpx 0;
		.icon_jf{
			width: 87rpx;
			height: 87rpx;
			margin-right: 20rpx;
			border-radius: 50%;

		}
	}
	.yijie{
		position: absolute;
		right: 0;
		top: 0;
		background: #FFE8E3;
		border-radius: 0rpx 30rpx 0rpx 30rpx;
		padding: 4rpx 20rpx;
		font-weight: 500;
		font-size: 26rpx;
		color: #FF5F40;
	}
	.yinav{
		flex: 1;
		display: flex;
		flex-direction: column;
		.name{
			font-weight: 800;
			font-size: 32rpx;
			color: #111111;
			display: block;
			margin-bottom: 10rpx;
		}
		.jienav{
			display: flex;
			flex-direction: row;
			align-items: center;
			.bq{
				padding: 2rpx 10rpx;
				background: #F5F5F5;
				border-radius: 6rpx;
				margin-right: 15rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.sxiao{
				background: #FFF5E9;
			}
			.icon_bz_s{
				width: 25rpx;
				height: 25rpx;
				margin-right: 5rpx;
			}
			.bname{
				font-weight: 500;
				font-size: 24rpx;
				color: #B97216;
			}
			.icon_ck_s{
				width: 24rpx;
				height: 24rpx;
			}
			.xq{
				margin-left: auto;
				display: flex;
				flex-direction: row;
				align-items: center;
				text{
					font-weight: 400;
					font-size: 26rpx;
					color: #333333;
				}
				.icon_gd{
					width: 24rpx;
					height: 24rpx;
					margin-left: 5rpx;
				}
			}


		}
		
	}
	.queren{
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		display: block;
		margin: 20rpx ;
	}
	.kaigongma{
		position: fixed;
		right: 0;
		bottom: 20%;
		padding:15rpx 25rpx;
		background: #FF5F40;
			border-radius: 16rpx;
			// border: 4px solid #F5F5F5;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			z-index: 100;
			.kainame{
				font-weight: bold;
				font-size: 24rpx;
				color: #FFFFFF;
			}
			.kainum{
				font-weight: 800;
				font-size: 32rpx;
				color: #FFFFFF;
				display: block;
				margin-top: 5rpx;
			}
		}
		.nzlist{
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			margin: 24rpx 30rpx 0;
			.nzname{
				font-weight: bold;
				font-size: 32rpx;
				color: #111111;
				display: block;
				margin-bottom: 25rpx;
			}
			.nblist{
				display: flex;
				flex-direction: row;
				margin-bottom: 20rpx;
				.bname{
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;
				}
			}
			.nblist:last-child{
				margin-bottom: 0;
			}
			.rval{
				display: flex;
				flex-direction: row;
				align-items: center;
				
			}
			
			// .mb-2{
			// 	margin-bottom: 0rpx;
			// }
		}
		.rname{
			font-weight: 500;
			font-size: 24rpx;
			color: #666666;
		}
		.ztai{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 25rpx;
			.nzname{
				font-weight: bold;
				font-size: 32rpx;
				color: #111111;
				display: block;
				margin-bottom: 0;
			}
		}
		.dakajilu{
			padding: 10rpx 20rpx;
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			background: #FFE5E5;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			.heshi{
				font-weight: 500;
				font-size: 22rpx;
				color: #FF3B3B;
			}
		}
		.wid{
			width: 140rpx;
			display: inline-block;
		}
		.fzhi{
			margin-left: 20rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #3DA1FF;
			display: inline-block;
		}
		.icon_ckred{
			width: 24rpx;
			height: 24rpx;margin-left: 5rpx;
		}

		.ztwonew{
			// background: #F5F5F5;
			// border-radius: 10rpx;
			// padding: 20rpx 20rpx;
			margin-top: 20rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #eee;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: column;
			.shiname{
				font-weight: 400;
				font-size: 30rpx;
				color: #111111;
				display: block;
				margin-bottom: 14rpx;
			}
		}
		.shinav{
			display: flex;
			flex-direction: row;
			align-items: center;
			.shileft{
				border-radius: 10rpx;
				background-color: #F5F5F5;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				// width: 42%;
				flex: 1;
				// height: 130rpx;
				padding: 15rpx 0;
				.kname{
					color: #666;
					font-size: 23rpx;
					font-weight: 400;
				}
				.ktime{
					font-weight: 500;
					font-size: 38rpx;
					color: #111111;
				}
			}
			.shilian{
				display: flex;
				flex-direction: column;
				width: 180rpx;
				margin: 0 15rpx;
				justify-content: center;
				align-items: center;
				.lianone{
					position: relative;
					width: 100%;
					height: 37rpx;
					.ltxt{
						width: 100%;
						height: 100%;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						font-weight: 400;
						font-size: 20rpx;
						color: #FF653F;
					}
				}
				.gong{
					font-weight: bold;
					font-size: 32rpx;
					color: #111111;
					display: block;
					margin-top: 10rpx;
				}
			}
		}

		.sjiview{
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;
			.sjname{
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				display: block;
				margin-bottom: 20rpx;

			}
			.jieview{
				background: #F5F5F5;
				border-radius: 20rpx;
				padding: 5rpx 20rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				.iteminput{
					font-size: 28rpx;
					color: #333;
					background: none;
					border: none;
				}
				.xshi{
					margin-left: 10rpx;
					font-weight: bold;
					font-size: 36rpx;
					color: #333333;
				}
			}
		}
		.sjiview:last-child{
			margin-bottom: 0;
		}
</style>
